// 数据表
<template>
  <div id="main1" style="height: 100%; overflow: auto">
    <h2
      style="
        text-align: center;
        color: #343434;
        margin-bottom: 2vh;
        margin-top: 0.2rem;
      "
    >
      {{ title }}
    </h2>

    <el-table
      :data="params"
      border
      style="
        color: #0e0e0e;
        text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
      "
      :header-cell-style="{ color: '#0e0e0e' }"
      :cell-style="getCellStyle"
    >
      <el-table-column
        v-for="(item, index) in typeList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
        <template slot-scope="scope" show-overflow-tooltip>
          <a
            v-if="item.label == '链接'"
            :href="scope.row.link"
            target="_blank"
            style="color: blue"
            >{{ scope.row.link }}
          </a>
          <span v-else>
            {{ scope.row[item.prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "dataTable",
  props: {
    title: "",
    tableChoice: "",
    dictionary: "",
  },
  data() {
    return {
      typeList: [],
      tableData: [],
      data: [],
      params: null,
    };
  },
  created() {},
  methods: {
    getData(params) {
      this.typeList = [];
      this.params = params[0].dataList;
      let typeList = this.tableChoice.split(",");
      typeList.map((item) => {
        this.typeList.push({
          prop: item.split("|")[1],
          label: item.split("|")[0],
        });
      });
    },
    getCellStyle(row, column, rowIndex, columIndex) {
      // 处理颜色
      if (this.dictionary) {
        let colorArr = this.dictionary.split(",");
        for (let i = 0; i < colorArr.length; i++) {
          if (row.column.property == colorArr[i].split(":")[0]) {
            return `background-color: ${row.row[colorArr[i].split(":")[1]]}`;
          }
        }
      }
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "";
      }
    },
  },
};
</script>

<style lang="scss">
.el-table .warning-row {
  background: #e8f4ff !important;
}

.el-table .success-row {
  background: #f0f9eb !important;
}

#main1 {
  width: 100%;
}
</style>
